<template>
  <div class="title-btns block">
    <el-button type="primary" @click="addClickEvent" v-if="hasAuth(auth, 'plus')">
      {{$t('ship.button.plus')}}
    </el-button>
  </div>

  <el-table
      stripe
      class="daf-table"
      :data="listData"
      style="width: 100%">
    <el-table-column
        type="expand"
    >
      <template #default="scope">
        <div v-if="scope.row.type===1">all grant</div>
        <div v-else>
          <el-tree
              node-key="id"
              show-checkbox
              :data="showMenus"
              @check="checkChange"
              :props="defaultProps"
              v-if="getMenuByIds(scope.row.menus).length > 0"
              :default-checked-keys="getMenuByIds(scope.row.menus)"
          >
          </el-tree>
          <div class="assets-expand" >
            <div v-for="key in Object.keys(scope.row.assets)" :key="key">
              <label>{{assetsType[key]}}：</label>
              <span v-for="item in scope.row.assets[key]" :key="item.id">  
            </span>
            </div>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column
        prop="id"
        label="Role ID"
    >
    </el-table-column>
    <el-table-column
        prop="name"
        label="Role Name"
        >
    </el-table-column>
    <el-table-column
        prop="level"
        label="Role Level"
        >
    </el-table-column>
    <el-table-column
        label="Authority Scope"
        >
      <template #default="scope">
        <span>{{scope.row.type === 1 ? 'All': 'Custom'}}</span>
      </template>
    </el-table-column>
    <el-table-column
        prop="desc"
        label="Role Desc">
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="createTime">
    </el-table-column>
    <el-table-column
        prop="updateTime"
        label="updateTime">
    </el-table-column>
    <el-table-column
        label="Operation">
      <template #default="scope">
        <span
            class="btn-primary"
            v-if="scope.row.name != 'super' && hasAuth(auth, 'edit')"
            @click="editClickEvent(scope.row)">{{$t('ship.button.edit')}}
        </span>&nbsp;
        <span
            class="btn-primary"
            v-if="scope.row.name != 'super' && hasAuth(auth, 'remove')"
            @click="removeClickEvent(scope.row.id)">{{$t('ship.button.remove')}}
        </span>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
      :width="500"
      destroy-on-close
      :title="dialogTitle"
      v-model="dialogFormVisible"
      @close="dialogForm.resetFields()">
    <el-form :model="formParam" :rules="rules" ref="dialogForm">
      <el-form-item label="Role Name" label-width="100px" prop="name">
        <el-input v-model="formParam.name" autocomplete="off" maxlength="40" clearable></el-input>
      </el-form-item>
      <el-form-item label="Role Level" label-width="100px" prop="level">
        <el-input-number v-model="formParam.level" controls-position="right" :min="minLevel" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="Role Type" label-width="80px" prop="type">
        <el-select v-model="formParam.type" placeholder="Choose Role Type">
          <el-option
              v-for="(item, index) in Object.values(roleTypes)"
              :key="index"
              :label="item"
              :value="index">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Menu permissions" label-width="80px" prop="menus">
        <span v-if="formParam.type === 1">All</span>
        <el-tree
            ref="dialogTree"
            v-else
            :data="allMenus"
            show-checkbox
            node-key="id"
            :default-checked-keys="formParam.menus"
            :props="defaultProps">
        </el-tree>
      </el-form-item> 
      <el-form-item label="Role Desc" label-width="80px" prop="desc">
        <el-input v-model="formParam.desc" autocomplete="off" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible=false">Cancel</el-button>
      <el-button @click="dialogForm.resetFields()" type="warning">Reset</el-button>
      <el-button type="primary" @click="submitForm">Save</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" src="./role.ts"></script>
<style scoped lang="scss" src="./index.scss"></style>
